<template>
  <view class="contain">
    <view class="top-content"></view>
    <view class='topradio'>
      <!-- <view class="top">
			<view class="img">
				<image src="../../static/images/yonghu_1.png"> 
			</view>
			<view class="text">
				<view class="name">
					{{name}}
				</view>
				<view class="time">
					上次登陆时间：{{data.time}}
				</view>
			</view>
		</view> -->
      <view class="childborder">
        <uni-list>
          <uni-list-item
            showArrow="true"
            class="list1"
            title=""
          >
            <template slot="header">
              <image
                class="slot-image"
                src="@/static/me/my.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />
                <text>名称</text>
                <text style="position: absolute; right:30rpx;">{{name}}</text>

            </template>

          </uni-list-item>
          <uni-list-item
            showArrow="true"
            class="list1"
          ><template slot="header">
              <image
                class="slot-image"
                src="@/static/me/profile.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />
                <text>职位</text>
                <text style="position: absolute; right:30rpx;">{{posion}}</text>
            </template></uni-list-item>
          <uni-list-item
            showArrow="true"
            class="list1"
          ><template slot="header">
              <image
                class="slot-image"
                src="@/static/me/phone.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />
                <text>电话</text>
                <text style="position: absolute; right:30rpx;">{{form.phonenumber  ? form.phonenumber : '暂无'}}</text>
            </template></uni-list-item>
          <uni-list-item
            showArrow="true"
            class="list1"
            title=""
          ><template slot="header">
              <image
                class="slot-image"
                src="@/static/me/at.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />
                <text>邮箱</text>
                <text style="position: absolute; right:30rpx;">{{form.email ? form.email :'暂无'}}</text>
            </template>
          </uni-list-item>
          <uni-list-item
            v-show="statetrue"
            showArrow="true"
            link
            @click="statusClickone"
            class="list"
            title="状态汇总"
          ><template slot="header">
              <image
                class="slot-image"
                src="@/static/me/records.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />

            </template>

          </uni-list-item>
          <!-- <uni-list-item
         showArrow="true" 
         	link 
         	@click="salesClickone" 
         class="list"  title="销售汇总"><template slot="header">
						<image class="slot-image" src="@/static/me/cascades.png"
							style="width:50rpx;height: 50rpx;padding-right: 15rpx;">
 
					</template>
       
          </uni-list-item> -->
          <uni-list-item
            showArrow="true"
            link
            @click="clearClickone"
            class="list"
            title="修改密码"
          ><template slot="header">
              <image
                class="slot-image"
                src="@/static/me/edit.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />

            </template>

          </uni-list-item>
          <uni-list-item
            showArrow="true"
            @click="clearClick"
            link
            class="list"
            title="清除视频缓存"
          ><template slot="header">
              <image
                class="slot-image"
                src="@/static/me/video-light.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />
              <u-modal
                @confirm='clearbtn()'
                :show-cancel-button='true'
                v-model="clearshow"
                :content="clearcontent"
              ></u-modal>
            </template></uni-list-item>
          <uni-list-item
            @click="helmetClickone"
            link
            showArrow="true"
            class="list"
            title="远程信息配置"
          >
            <template slot="header">
              <image
                class="slot-image"
                src="@/static/me/settingss.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />
            </template>
          </uni-list-item>
          <uni-list-item
            @click="phoneClick"
            link
            showArrow="true"
            class="list"
            title="联系我们"
          >
            <template slot="header">
              <image
                class="slot-image"
                src="@/static/me/service.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />

            </template>
          </uni-list-item>
          <uni-list-item
            @click="aboutClick"
            link
            showArrow="true"
            class="list"
            title="关于"
          >
            <template slot="header">
              <image
                class="slot-image"
                src="@/static/me/info.png"
                style="width:50rpx;height: 50rpx;padding-right: 15rpx;"
              />
              <u-modal
                v-model="show"
                :content="content"
              ></u-modal>
            </template>
          </uni-list-item>

        </uni-list>
      </view>
      <view class="bottom">
        <!-- <view class="text"> -->
        <!-- 退出登录 -->
        <u-button
          @click="handleOut"
          class="btn"
          type="primary"
          :ripple="true"
          ripple-bg-color="#32afff"
        >退出登录
        </u-button>
        <!-- </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { userProfileget, dataQuery } from "@/api/index.js";

export default {
  data() {
    return {
      data: {
        name: "测试员",
        time: "2021.8.18 12:04:56"
      },
      timer: null,
      name: "",
      posion: "",
      form: {},
      show: false,
      showone: false,
      clearshow: false,
      value1: "",
      value2: "",
      value3: "",
      content: "版本信息:1.1",
      clearcontent: "确定清除所有缓存视频?",
      statetrue: true
    };
  },
  onLoad: function() {
    this.name = uni.getStorageSync("nickName");
  },
  onHide() {
    clearInterval(this.timer);
    this.timer = null;
  },
  onShow() {
    this.getList();
    let roleKey = uni.getStorageSync("roleKey");
    if (roleKey == "Inspector") {
      this.timer = setInterval(function() {
        this.statetrue = true;
        const code = "alarm_summary";
        let number = 0;
        dataQuery({}, code).then(res => {
          res.forEach(item => {
            if (item.label === "notRecovered") {
              if (item.value) {
                uni.showTabBarRedDot({
                  index: 1
                });
              } else {
                uni.removeTabBarBadge({
                  index: 1
                });
              }
            } else {
              uni.removeTabBarBadge({
                index: 1
              });
            }
          });
          // // 赋值给报警列表铃铛的角标
          // i[0].setAttribute("badge-text", number);
        });
      }, 5000);
    } else {
      this.statetrue = false;
    }
  },
  onPullDownRefresh() {},
  methods: {
    getList() {
      userProfileget().then(res => {
        this.userId = res.data.userId;
        console.log(this.userId);

        this.form = res.data;
        this.posion = res.roleGroup;
      });
    },
    taskStatusTabChange(index) {
      // this.currentTaskStatusTab = index
    },
    handleOut() {
      uni.navigateTo({
        url: "/pages/login/login"
      });
      uni.removeStorageSync("token");
      uni.removeStorageSync("roleKey");
      // uni.removeStorageSync("helmetpassword");
      // uni.removeStorageSync("helmetusername");
    },
    clearClickone() {
      console.log(1111);
      uni.navigateTo({
        url: `/pages/preview/pasword`
      });
    },
    helmetClickone() {
      uni.navigateTo({
        url: `/pages/preview/helmet?userId=` + this.userId
      });
    },
    monitorClick() {
      uni.navigateTo({
        url: `/pages/monitor/index`
      });
    },
    aboutClick() {
      this.show = true;
    },
    clearClick() {
      this.clearshow = true;
    },
    clearbtn() {
      let that = this;
      // uni.showModal({
      //   title: "提示",
      //   content: `确定清除所有缓存视频?`,
      // success: function(rsp) {
      // if (rsp.confirm) {
      uni.getSavedFileList({
        success: function(res) {
          if (res.fileList.length === 0) {
            uni.showToast({
              icon: "none",
              title: "暂无缓存"
            });
          } else {
            uni.showLoading({
              title: "清除中",
              mask: true
            });
            let flag = 0;
            res.fileList.forEach(item => {
              console.log(2);
              flag += 1;
              uni.removeSavedFile({
                filePath: item.cachePath,
                complete: function(res) {}
              });
              console.log(flag, "xxxx");
              if (flag == res.fileList.length) {
                console.log(3);
                uni.setStorageSync("cacheList", []);
                uni.hideLoading();
                uni.showToast({
                  icon: "none",
                  title: "清除成功"
                });
              }
            });
          }
        }
      });
      // }
      // }
      // });
    },
    phoneClick() {
      uni.makePhoneCall({
        phoneNumber: "13940382928" //仅为示例
      });
    },
    statusClickone() {
      console.log(111111111);
      uni.navigateTo({
        url: `/pages/preview/statustable`
      });
    },
    salesClickone() {
      uni.navigateTo({
        url: `/pages/preview/salestalbe`
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: white;
  // padding: 50rpx;
  // background-color: #007AFF;

  .top {
    height: 240rpx;
    padding: 25px;
    background-color: #0065fd;

    .img {
      float: left;
      // background-color: white;
      image {
        // margin-top: 10rpx;
        background-color: white;
        width: 150rpx;
        height: 150rpx;
        border-radius: 75rpx;
      }
    }

    .text {
      float: right;
      color: white;

      .name {
        padding-top: 10rpx;
        font-size: 32rpx;
        font-weight: 600;
      }

      .time {
        padding-top: 10rpx;
      }
    }
  }

  .bottom {
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    height: 70rpx;
    text-align: center;
    line-height: 100rpx;
  }
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 50rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 0rpx 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
.footer {
  background-color: transparent;
}
.btn {
  background: linear-gradient(-34deg, #1040be, #026dff);
  width: 400rpx;
  height: 70rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
/deep/ .u-form-item--left__content__label {
  font-size: 33rpx;
}
/deep/ .u-input__input {
  // color:
}

.co {
  color: red;
}
/deep/ .u-input__input {
  // text-align: right;
}
/deep/ .u-form-item__message {
  text-align: right;
  margin-right: 32rpx;
}
.borderbottom:after {
  border-bottom-width: 0px !important;
}
/deep/ .input1 > .u-input__input > .uni-input-wrapper > .uni-input-input {
  display: none !important;
  //
}
.list1 {
  padding: 25rpx 0rpx 25rpx 0rpx;
  /deep/ .uni-icon-wrapper {
    display: none;
  }
}
.list {
  padding: 25rpx 0rpx 25rpx 0rpx;
}
// /deep/ .uni-icon-wrapper {
//   display: none;
// }
/deep/ .valueone {
  /deep/ .valueone {
    text-align: left !important;
  }
}
</style>
